nav {
    background: #2e2828;
    height: 36px;

    .wrapper {
        display: flex;
        justify-content: space-between;

        .nav-left ul,
        .nav-right ul {
            display: flex;
            justify-content: space-between;

            li {
                padding: 0 8px;
                position: relative;

                .nav-jt {
                    color: #afafaf;
                    font-size: 11px;
                    height: 36px;
                    line-height: 36px;

                    &::before {
                        content: "";
                        width: 1px;
                        height: 10px;
                        display: block;
                        position: absolute;
                        top: 15px;
                        left: 0;
                        background: #414141;
                    }

                    &:hover {
                        color: #fff
                    }
                }
            }

            li:nth-child(1) {
                padding-left: 0px;

                a {
                    &::before {
                        display: none;
                    }
                }
            }
        }

        .nav-left>ul>li:nth-child(7),
        .nav-right>ul>li:nth-child(3),
        .nav-right>ul>li:nth-child(4),
        .nav-right>ul>li:nth-child(5) {
            padding-right: 25px;

            &:hover {
                background: #fff;

                .nav-jt {
                    color: #cb242b;

                    &::before {
                        background: #fff;
                    }
                }

                ul {
                    display: block;

                    a {
                        color: #afafaf;
                    }
                }
            }

            .nav-jt {
                &::after {
                    content: "";
                    display: block;
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    top: 12px;
                    right: 6px;
                    background: url(../img/icon-common.png) no-repeat -72px 0px;
                }
            }

            ul {
                display: none;
                width: 119px;
                position: absolute;
                right: 0px;
                top: 36px;
                border-radius: 10px 0 10px 10px/10px 0 10px 10px;
                background: #fff;
                z-index: 1;
                box-shadow: 0 2px 36px 0 rgba(0, 0, 0, 0.1);

                li {
                    width: 100%;
                    font-size: 11px;
                    line-height: 32px;
                    text-align: center;
                    padding: 0;
                }
            }
        }

        .nav-right>ul>li:nth-child(6) {
            padding-left: 23px;

            a::before {
                content: "";
                display: block;
                width: 16px;
                height: 16px;
                position: absolute;
                top: 8px;
                left: 3px;
                background: url(../img/icon-common.png) no-repeat -100px 0px;
            }

            &:hover {
                background: #fff;

                a {
                    color: #cb242b;

                    &::before {
                        background-color: #fff;
                        background-position: -120px 0px;
                    }
                }
            }


        }
    }
}